/**
  学习目标：08-React路由-嵌套路由的两个注意事项
 * 
+ 在React中，配置嵌套路由非常的简单，因为`Route`就是一个组件，可以在任意想配置的地方进行配置

+ 但是配置嵌套路由的时候，需要对路径进行处理，必须要先匹配到父级路由，才能匹配到子路由
+ `<Route>`不写`path`，配合`<Switch>` 实现404页面的提示

注意：

+ path的值，要从`/一级路由路径/二级路由路径` 开始写
+ 子组件中不需要再设置<Router>
+ 子组件中有多个路由 ，👍同样推荐使用<Switch> 组件包裹所有的<Router> 组价
+ 父子路由，是可以路径重复的。
 */
import React, { Component } from 'react'
import { HashRouter, Route, Link, BrowserRouter as Router, NavLink, Switch } from 'react-router-dom';

// 引入样式
import './index.css'

export default class App extends Component {

    render() {
        return (
            // 💥2. 全局只使用一个Router包括路由，嵌套路由中，不需要写第二个Router
            <Router>
                <div>
                    <h1>app组件</h1>
                    {/* 首页 */}
                    <Link to="/home">首页</Link>
                    <div>
                        <NavLink activeClassName='my-active' to="/home">跳到Home</NavLink>
                        <br />
                        <NavLink activeClassName='my-active' to="/my">跳到我的音乐</NavLink>
                        <br />
                        <NavLink activeClassName='my-active' to="/friend">跳到朋友</NavLink>
                    </div>
                    {/* 👍 使用<Switch></Switch>包住Route组件，表示匹配到一次就停止继续匹配 */}
                    <Switch>
                        <Route path="/home" component={Home} />
                        <Route path="/home" component={Home} />
                        <Route path="/home" component={Home} />
                        <Route path="/home" component={Home} />
                        <Route path="/my" component={MyMusic} />
                        <Route path="/friend" component={Friend} />
                        {/* <Route path="/" component={Friend} /> */}
                        {/* 注意 path不可用来处理404页面，注意放在最下面 */}
                        <Route component={NoMatch} />
                    </Switch>
                </div>

            </Router>
        )
    }
}
function Friend() {
    return <div>
        <div>
            <NavLink activeClassName='my-active' to="/friend">朋友</NavLink>
            <NavLink activeClassName='my-active' to="/friend/first">找朋友1</NavLink>
            <br />
            <NavLink activeClassName='my-active' to="/friend/second">找朋友2</NavLink>
            <br />
            <NavLink activeClassName='my-active' to="/friend/third">找朋友3</NavLink>

            <Switch>
                {/* 💥1. 嵌套路由中-父子级路由是可以重名的，两个都会匹配到 */}
                <Route path="/friend" exact component={FriendHome} />
                <Route path="/friend/first" component={Friend1} />
                <Route path="/friend/second" component={Friend2} />
                <Route path="/friend/third" component={Friend3} />
            </Switch>
        </div>
    </div>
}

function FriendHome() {
    return <div>朋友页面-父子重名路由</div>
}
function Friend1() {
    return <div>Friend1</div>
}
function Friend2() {
    return <div>Friend2</div>
}
function Friend3() {
    return <div>Friend3</div>
}
function Home() {
    return <div>home</div>
}
function MyMusic() {
    return <div>MyMusic</div>
}

function NoMatch() {
    return <div>404</div>
}